	<gm:page title="KinGBin Runs" authenticate="false" onload="onLoad()" gadget="true">
      
  <div class="gm-app-header">
    <h1>KinGBin Runs</h1>
  </div>
<div style="font-size:small;color:Red" >(Still in testing)</div>   
  <br/>

  <table>
    <tr>
      <td style="padding:10px;">
          <gm:map id="map" height="400px" width="400px" zoom="13" maptypes="true" lat="33.397040"  lng="-105.706740" >
            <gm:handleEvent src="blogEntryList" event="select" />
        </gm:map>
      </td>
      <td valign="top" align="left" style="padding:10 10 10 0;">
      <b>KinGBin Run Feed</b>
        <gm:list id="blogEntryList" pagesize="5" template="myListTemplate" data="http://pipes.yahoo.com/pipes/pipe.run?_id=04563565448ee8ede3f53f2767a0d2ae&_render=rss">
          <gm:handleEvent src="map" event="select"/>
          <gm:handleEvent event="select" execute="changeData();"/>
          <gm:handleEvent event="onrefresh" execute="selectFirstLocation();"/>
        </gm:list>
      </td>
    </tr>
  </table>   
                
   <gm:template id="myListTemplate" >
    <table class="blue-theme">
        <tr repeat="true">
          <td style="padding-bottom:10px">
            <b><gm:text ref="atom:title"/></b>
            <br/>
            <gm:html ref="atom:summary"/>
          </td>
        </tr>
    </table>
  </gm:template>      
                          
                              
<script>
/**
* Utility function to extract parameters appended to URL.
* @param {String} name Name of parameter in URL
* @return {String} Value of parameter, or "" if not found
*/
function getURLParam(name) {
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  return (results === null ? "" : results[1]);
}

/**
 * Populates global variables from URL query string.
 */
function populateVars() {
  param_KMLURL = getURLParam("kml");
}

function kml_load() 
{
  populateVars();
  var myMap = google.mashups.getObjectById('map').getMap();
  var geoXml = new GGeoXml(param_KMLURL);
  myMap.addOverlay(geoXml);
  myMap.enableDoubleClickZoom();
}
  
  
  
   function changeData() {
      var runs = google.mashups.getObjectById('blogEntryList').getData();
      var run = google.mashups.getObjectById('blogEntryList').getSelectedEntry();
      var urlGPath = new GPath("atom:link/@href");
      param_KMLURL = urlGPath.getValue(run);
      var myMap = google.mashups.getObjectById('map').getMap();
      var geoXml = new GGeoXml(param_KMLURL);
      myMap.addOverlay(geoXml);
      myMap.enableDoubleClickZoom();
  
      myMap.setMapType(myMap.getMapTypes()[2]); // Hybrid view is the third type supported by the Maps API   
      }  

    function  onLoad()
    {
      selectFirstLocation();
    
      var myMap = google.mashups.getObjectById('map').getMap();
      myMap.setMapType(myMap.getMapTypes()[2]); // Hybrid view is the third type supported by the Maps API
    }

    function selectFirstLocation() 
    {
      var runs = google.mashups.getObjectById('blogEntryList').getData();
      if (runs.size() > 0) 
      {
        var entry = runs.entryAt(0);
        google.mashups.getObjectById('blogEntryList').selectEntry(entry);
      }
    }
</script>

  
</gm:page>